<style scoped lang="scss">
.cart-items {
  .item {
    margin-bottom: 5px;
  }
}
.card-container {
  height: 90px;
  font-size: 0.9rem;
}
// 修改 element-ui el-card cass
.el-card ::v-deep .el-card__header {
  padding: 10px 20px;
}
.el-card ::v-deep .el-card__body {
  padding: 10px 20px;
}
</style>

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>CPU</span>
            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-cpu" />
          </div>
          <div class="cart-items card-container">
            <div class="item">使用率： {{ cpuInfo.usePercent || '0.00' }}%</div>
            <div class="item">逻辑CPU数量： {{ cpuInfo.cpus ? cpuInfo.cpus.logical : '0' }}核心</div>
            <div class="item">物理CPU数量： {{ cpuInfo.cpus ? cpuInfo.cpus.physical : '0' }}核心</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>内存使用率</span>
            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-s-grid" />
          </div>
          <div class="card-container" style="display: flex;flex-direction: row;justify-content: space-between;">
            <div class="cart-items">
              <div class="item">使用率： {{ memoryInfo.usePercent || '0.00' }}%</div>
              <div class="item">剩余内存：{{ memoryInfo.free || '0.00' }}</div>
              <div class="item">总内存：{{ memoryInfo.total || '0.00' }}</div>
            </div>
            <el-progress type="circle" :percentage="parseInt(memoryInfo.usePercent || 0)" :stroke-width="10" :width="90" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>磁盘使用率</span>
            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-pie-chart" />
          </div>
          <div class="card-container" style="display: flex;flex-direction: row;justify-content: space-between;">
            <div class="cart-items">
              <div class="item">使用率： {{ diskInfo.usePercent || '0.00' }}%</div>
              <div class="item">剩余内存：{{ diskInfo.free || '0.00' }}</div>
              <div class="item">总内存：{{ diskInfo.total || '0.00' }}</div>
            </div>
            <el-progress type="circle" :percentage="parseInt(diskInfo.usePercent || 0)" :stroke-width="10" :width="90" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>负载</span>
            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-pie-chart" />
          </div>
          <SystemLoad :data-list="systemLoad" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>实时网卡流量（全部网卡）</span>
          </div>
          <div style="width: 100%">
            <Net :data-list="netIoInfo" width="100%" height="400px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>系统运行信息</span>
          </div>
          <el-table :data="systemInfo" stripe>
            <el-table-column label="数据项名称" prop="label" min-width="50" />
            <el-table-column label="数据值" prop="value" min-width="100" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>服务器信息</span>
          </div>
          <el-table :data="hostInfo" stripe>
            <el-table-column label="数据项名称" prop="label" min-width="50" />
            <el-table-column label="数据值" prop="value" min-width="100" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { sendMessage, addMessageHandler, deleteMessageHandler, Events } from '@/utils/websocket'
import SystemLoad from './components/SystemLoad'
import Net from './components/Net.vue'
export default {
  name: 'ServerIndex',
  components: { Net, SystemLoad },
  data() {
    return {
      EventRunInfoTimer: null,
      cpuInfo: {},
      diskInfo: {},
      memoryInfo: {},
      systemLoad: [],
      systemInfo: [],
      netIoInfo: [],
      hostInfo: []
    }
  },
  created() {
    // 让服务器推送运行时数据
    this.EventRunInfoTimer = setInterval(() => {
      sendMessage(Events.RunInfo, '')
    }, 1000 * 3)

    // 接收websocket消息事件注册
    addMessageHandler(Events.RunInfo, (message) => {
      this.cpuInfo = message.data.cpuInfo
      this.diskInfo = message.data.diskInfo
      this.memoryInfo = message.data.memoryInfo
      this.netIoInfo = message.data.netIoInfo
      this.systemInfo = message.data.systemInfo
      this.hostInfo = message.data.hostInfo
      this.systemLoad = message.data.systemLoad // 系统负载-右上角图标
    })
  },
  beforeDestroy() {
    deleteMessageHandler(Events.RunInfo)
    clearInterval(this.EventRunInfoTimer)
  },
  methods: {

  }
}
</script>
